<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部固定引用-->
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/info-detail.css">
    <!--固定引用结束,自定义引用添加在下面-->
    <title>奖项规则</title>
    <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
    <style>
        header {
            width: 100%;
            padding: 0.28rem 0.32rem 0.10rem;
            position: fixed;
            top: 0;
            z-index: 999;
            background: #fff;
        }
        .navBar {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.28rem 0.32rem;
        }
        .header-left {
            width: 0.32rem;
            height: 0.32rem;
        }
        .header-left img { width: 100%; height: 100% }
        .header-title {
            font-family: PingFangSC-Medium;
            font-size: 0.32rem;
            letter-spacing: 0;
            text-align: center;
            font-weight: 500;
        }
        .nav {
            width: 100%;
            /* margin-top: 8px; */
            overflow-x: auto;
            box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.06);
        }
        .nav ul {
            float: left;
            list-style: none;
            margin: 0;
            padding: 0;
            white-space: nowrap;
        }
        .nav ul li {
            position: relative;
            display: inline-block;
            color: rgba(0, 0, 0, 0.4);
            padding: 7px 8px;
        }
        .nav ul .active {
          /* color: rgba(0, 0, 0, 0.85); */
        }
        .nav ul .active::after {
            content: "";
            position: absolute;
            display: inline-block;
            width: 18px;
            height: 3px;
            /* background: #E04A48; */
            bottom: 0;
            left: calc(50% - 9px);
        }
        main {
            width: 100vw;
            height: 100vh;
            padding: 8px 16px;
            /* margin-top: 70px; */
            /*overflow: hidden;*/
            position: relative;
            border-radius: 4px 4px 0 0;
        }
        .main-bg {
          position: absolute;
          width: calc(100% - 32px);
        }
        main .main-bg1 {
          position: absolute;
            /* background: linear-gradient(180deg, rgba(224,74,72,0.24) 0%, rgba(224,74,72,0.24) 0%, rgba(216,216,216,0.00) 100%, rgba(216,216,216,0.00) 100%) no-repeat; */
            background-size: 100% 356px;
            border-radius: 4px 4px 0 0;
            width: calc(100% - 32px);
            height: 356px;
        }
        main .main-bg1 .main-context1 {
            background-size: 199px 336px;
            /* background: url("../../images/details/bull-Fill-16.png") no-repeat center 10px; */
            padding: 16px;
            height: 100%;
        }
        .main-context img { width: 100%;}
        .main-context p{
          color: rgba(0, 0, 0, 0.85);
        }
    </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
    <!-- 头部 -->
    <div class="info-detail-header">
        <div class="navBar">
            <div class="header-left">
                <img src="../../images/allPic/jiantou.png" alt="" onclick='closeWindow()' class="headerimg">
            </div>
            <div class="header-title">奖项规则</div>
            <div class="header-right"></div>
        </div>
        <div class="nav">
            <ul id="header-context"></ul>
        </div>
      </div>

    <main>
      <div class="main-bg1">
        <div class="main-context1"></div>
      </div>
        <div class="main-bg">
            <div class="main-context" id="context"></div>
        </div>
    </main>
</div>
</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
    let LIST = []

    /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
    function initPage(params) {
      console.log(configColorType, 'configColorType')
      if (configColorType === '1') {
        $('.headerimg').attr('src', '../../images/allPic/blackfanhui.png')
        bridgeUtils.loadCss('../../css/theme/default/black.css')
      } else {
        $('.headerimg').attr('src', '../../images/allPic/jiantou.png')
        bridgeUtils.loadCss('../../css/theme/white/white.css')
      }
      getInfo()
    }

    function getInfo() {
      Server.realTimeInfo.selectPrizeInfoList().then(res => {
        const list = res.list
        LIST = list
        if (list.length > 0) {
          for (let i = 0; i < list.length; i++) {
            let title = list[i] ? list[i].title : null
            $('#header-context').append(`<li class="header-item ${i === 0 ? 'active' : ''}" onclick="tabChange(this)">${title}</li>`)
          }
          setContext(list[0])
        }
        console.log(list)
      })
    }

    // $(document).on("click", ".header-item", function() {
    //     const idx = $(this).index()
    //     if (idx !== undefined) {
    //         $(this).addClass('active').siblings().removeClass('active')
    //         setContext(LIST[idx])
    //     }
    // });

    function tabChange(event) {
      const idx = $(event).index()
      if (idx !== undefined) {
        $(event).addClass('active').siblings().removeClass('active')
        setContext(LIST[idx])
      }
    }

    function setContext(html) {
      const el = $('#context')
      if (html && html.content) {
        el.html(html.content)
      } else {
        el.html(`<p style="height: 320px; text-align: center">暂未设置内容</p>`)
      }
    }

    //点击返回按钮
    function closeWindow() {
      jsBridge.closeWindows()
    }

    /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
    function startPage(params) {

    }

    function reLoadPage() {

    }
</script>
</html>
